@import '../../../../app/mixins.css';

@define-mixin buttonBasics {
  @mixin contentLarge bold;

  letter-spacing: 0.7px;
  border-radius: var(--border-radius-standard);
  max-width: 100%;
  outline: none;
  text-transform: none;
  transition: var(--transition-button) !important;

  &.l {
    height: 48px;
    padding: 0 28px;
  }

  &.m {
    height: 40px;
    padding: 0 20px;
  }

  &.s {
    @mixin contentNormal bold;

    height: 36px;
    padding: 0 16px;
  }

  &.xs {
    @mixin contentNormal bold;

    height: 32px;
    padding: 0 12px;
  }

  & * {
    line-height: inherit !important;
  }

  & :global(.button-icon) {
    display: block;
    height: 1.2em; /* stylelint-disable-line */
    margin-left: 0.42em; /* stylelint-disable-line */
    width: 1.2em; /* stylelint-disable-line */
  }

  & .ripple {
    display: none;
  }

  &:disabled {
    opacity: 0.58;
  }
}

@define-mixin buttonPrimary {
  background-color: var(--color-ultramarine-blue) !important;
  color: var(--color-strong-white) !important;

  &:focus,
  &:hover {
    box-shadow: 3px 3px 10px 0 rgba(61, 113, 255, 0.36) !important;
  }
}

@define-mixin buttonSecondary {
  background-color: transparent !important;
  border: solid 1px var(--dark-border-color);
  color: var(--color-maastricht-blue) !important;

  &:global(.light) {
    color: var(--color-strong-white) !important;
    border-color: var(--light-border-color) !important;
  }

  &:focus,
  &:hover {
    color: var(--color-ultramarine-blue) !important;
  }
}

@define-mixin buttonTertiary {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-ultramarine-blue) !important;
  text-decoration: none;

  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

@define-mixin buttonWarning {
  background-color: var(--color-burnt-sienna) !important;
  color: var(--color-strong-white) !important;

  &:focus,
  &:hover {
    /* background: color(var(--color-burnt-sienna) l(+4%)) !important; */
    box-shadow: 3px 3px 10px 0 rgba(236, 104, 104, 0.36) !important;
  }
}
